<template>
  <div class="my-tab">
    <router-link tag="div"
                 class="tab-item"
                 :to="{name:'recommend'}">
      <span class="tab-link">
        推荐
      </span>
    </router-link>
    <router-link tag="div"
                 class="tab-item"
                 :to="{name:'singer'}">
      <span class="tab-link">
        歌手
      </span>
    </router-link>
    <router-link tag="div"
                 class="tab-item"
                 :to="{name:'rank'}">
      <span class="tab-link">
        排行
      </span>
    </router-link>
    <router-link tag="div"
                 class="tab-item"
                 :to="{name:'search'}">
      <span class="tab-link">
        搜索
      </span>
    </router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
@import '~@/common/scss/mymixin.scss';

.my-tab {
  @include fjc(center);
  height: 88px;
  @include font-size($font-size-large);
  .tab-item {
    flex: 1;
    text-align: center;
    .tab-link {
      padding-bottom: 10px;
      color: $color-text-l;
    }
    &.router-link-active {
      .tab-link {
        color: $color-theme;
        border-bottom: 2px solid $color-theme;
      }
    }
  }
}
</style>
